import React, { PureComponent } from 'react'

import { SwitchTransition, CSSTransition } from "react-transition-group";

import './SwitchTransition.css'
export default class SwitchTransitionDemo extends PureComponent {
  constructor() {
    super()

    this.state = {
      isOn: true
    }
  }
  render() {
    const { isOn } = this.state;
    
    return (
      <div style={{width: "500px", margin:"0 auto", padding: "20px"}}>
        {/* 
          mode：默认是out-in(先隐藏之前的在显示)   in-out
          cssTransition 就不用in了 使用key  
        */}
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={isOn ? "on" : "off"}
            classNames="btn"
            timeout={1000}
          > 
            <button onClick={e => this.setState({isOn: !isOn})}>
              {isOn ? "on" : "off"}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
